import React,{useState, useMemo ,useEffect} from 'react'
import { Search,Swiper, Image,SwipeCell, Flex, Button, Typography, Toast ,Empty,PullRefresh, Tabs} from 'react-vant';
import {useNavigate} from 'react-router-dom'
import axios from 'axios'
import './index.css'
export default function Home() {
  const [value, setValue] = useState('');
  const [count, setCount] = useState(0);
  const [images,setImages]=useState([
    'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF',
    'https://t7.baidu.com/it/u=3631608752,3069876728&fm=193&f=GIF',
    'https://t7.baidu.com/it/u=1415984692,3889465312&fm=193&f=GIF',
    'https://t7.baidu.com/it/u=738441947,1208408731&fm=193&f=GIF',
    'https://t7.baidu.com/it/u=4080826490,615918710&fm=193&f=GIF',
    'https://t7.baidu.com/it/u=3988344443,4282949406&fm=193&f=GIF',
    'https://t7.baidu.com/it/u=334080491,3307726294&fm=193&f=GIF',
    'https://t7.baidu.com/it/u=3713375227,571533122&fm=193&f=GIF',
  ])
  const [list,setList]=useState([])
  const navigate=useNavigate()
  
  render()
  function render(){
    axios.get('/api/list').then((resp)=>{
      setList(resp.data.list)
    })
  }
  
  const del=({id})=>{
    axios.get('/api/del',{params:{id}}).then((resp)=>{
      if (resp.data.code===200) {
        Toast.success(resp.data.msg)
        render()
      }
    })
  }
  
  const detail=(id)=>{
    navigate(`/detail/${id}`)
  }
  const ss=()=>{
    navigate('/search')
  }


  const onRefresh = showToast => {
    return new Promise(resolve => {
      setTimeout(() => {
        if (showToast) {
          Toast.info('刷新成功')
        }
        setCount(count + 1)
        resolve(true)
      }, 1000)
    })
  }
  // 随机颜色
  // console.log('#'+(Math.floor(Math.random()*0xffffff).toString(16).padStart(6,'0')))
   
  return (
    <div>
      <div className='box'>
        <div className="top" onClick={ss}>
        <Search value={value} onChange={setValue} placeholder="请输入搜索关键词"  />
        </div>
        <div className="button">
          <div className='banner'>
          <Swiper autoplay={true}>
            {images.map((image) => (
              <Swiper.Item key={image}>
                <Image lazyload src={image} />
              </Swiper.Item>
            ))}
          </Swiper>
          </div>
          <PullRefresh
            onRefresh={() => onRefresh(true)}
            onRefreshEnd={() => console.log('onRefreshEnd')}
          >
            <div className='list'>
            {list.length>0 ? (list.map((item,ind)=>(<div key={ind} onClick={()=>detail(item.id)}>
              <SwipeCell
              rightAction={
                <Button style={{ height: '100%' }} square type="danger" onClick={()=>del(item)}>
                  删除
                </Button>
              }
            >
              <Flex className="demo-product-card" align="stretch">
                <Image src={item.img} className="demo-product-card__img" />
                <Flex direction="column" justify="between" className="demo-product-card__content">
                  <div>
                    <Typography.Title level={5}>{item.title}</Typography.Title>
                    <Typography.Text type="secondary">{item.word}</Typography.Text>
                  </div>
                  <Flex justify="between" align="center">
                    <Typography.Text strong size="lg">
                      ¥{item.price}
                    </Typography.Text>
                  </Flex>
                </Flex>
              </Flex>
            </SwipeCell>
            </div>))):(<Empty
              className="custom-image"
              imageSize={90}
              image={<img src="https://img.yzcdn.cn/vant/custom-empty-image.png" />}
              description="商品已删除全部"
            />)}
          </div>
          </PullRefresh>
          
        </div>
      </div>
    </div>
  )
}
